<template>
	<view>
		<uNavbar title="领奖进度"></uNavbar>
		<view class="award flex_Z">
			<view class="award_top flex_ld">
				<text>确认奖品收货地址：</text>
				<view class="address_box flex_dq">
					<view class=" flex_dq" v-if="!stateAddress"  @click="goAddress">
						<text>选择收货地址</text>
						<u-icon class="" name="arrow-right" color="#A68A64" size="18"></u-icon>
					</view>
					<view class=" flex_dq" v-if="shippingStatus == 1">
						<text>待发货</text>
					</view>
					<view class=" flex_dq" v-if="shippingStatus == 2">
						<text>待收货</text>
					</view>
					<view class=" flex_dq" v-if="shippingStatus == 3">
						<text>已收货</text>
					</view>
				</view>
			</view>
			<view class="award_btm flex_Z">
				<text>{{addressInfo.name}} {{addressInfo.phone}}</text>
				<text>{{addressDetail}}</text>
			</view>
		</view>

		<view class="wraps" v-if="logisticsInfo">
			<view class="wrapstop">
				物流信息
			</view>
			<view class="wrapsn">
				<u-steps :current="logisticsInfo.length" direction="column" activeColor="#A68A64">
					<u-steps-item v-for=" (item,index) in logisticsInfo " :key="index" :title="item.AcceptStation" :desc="item.AcceptTime">
					</u-steps-item>
				</u-steps>
			</view>
			<view class="empty2"></view>
		</view>

		<view class="confirmm_btn flex_c" v-if="!stateAddress" @click="confirmAddress">
			<text>确定</text>
		</view>

		<view class="confirmm_btn_s flex_c" v-if="shippingStatus == 2" @click="isReceipt">
			<text>确认收货</text>
		</view>
	</view>
</template>

<script>
	import {
		winProgress,
		saveDeliveryAddress,
		confirmReceipt
	} from '../../api/guessing.js'
	export default {
		data() {
			return {
				ids: '',
				winId:'',
				stateAddress: 0,
				shippingStatus: 0,
				logisticsInfo: {},
				addressInfo: {},
				addressDetail: ''
			}
		},
		onLoad(e) {
			this.ids = e.id
			this.isProgress()
		},
		onShow() {
			console.log(uni.getStorageSync("changeAddress"));
			if (uni.getStorageSync("changeAddress")) {
				this.addressInfo = uni.getStorageSync("changeAddress")
				this.addressDetail = this.addressInfo.province + this.addressInfo.city + this.addressInfo.area + this
					.addressInfo.address
			}
		},
		methods: {
			isProgress() {
				winProgress({
					award_config_id: this.ids
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						if (res.data) {
							this.stateAddress = res.data.address_details.is_set_address
							this.shippingStatus = res.data.shipping_status
							this.winId = res.data.id
							this.addressInfo = res.data.address_details
							this.logisticsInfo = res.data.express_data
							if (this.addressInfo) {
								this.addressDetail = this.addressInfo.province + this.addressInfo.city + this
									.addressInfo.area + this.addressInfo.address
							}
						}
					}
				})
			},
			// 填写地址
			confirmAddress() {
				saveDeliveryAddress({
					award_config_id: this.ids,
					address_id: this.addressInfo.id,
					address: '',
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						this.isProgress()
					}
				})
			},
			// 确认收货
			isReceipt() {
				confirmReceipt({
					id: this.winId,
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						this.isProgress()
					}
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/pagesMy/shoppingCenter/addressList?status=' + true
				})
			}
		},
		onUnload() {
			console.log('页面卸载，删除对应存储');
			uni.removeStorageSync("changeAddress")
		},
	}
</script>

<style scoped>
	.award {
		width: 690rpx;
		/* height: 264rpx; */
		background: #F2F2F2;
		border-radius: 12rpx;
		margin: 30rpx auto;
		padding: 20rpx 26rpx;
	}

	.award_top>text {
		font-size: 32rpx;
		color: #333333;
	}

	.address_box {
		font-size: 28rpx;
		color: #A68A64;
	}

	.award_btm {
		color: #999999;
		margin-top: 40rpx;
	}

	.award_btm>text:nth-child(2) {
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.confirmm_btn {
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 40rpx;
		font-size: 36rpx;
		color: #ffffff;
		margin: 80rpx auto 0;
	}

	.confirmm_btn_s {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 40rpx;
		font-size: 36rpx;
		color: #ffffff;
		margin: 80rpx auto 0;
	}

	.wrapsn {
		width: 90%;
		margin: 0 auto;
	}

	.wrapstop {
		font-size: 32rpx;
		/* font-weight: 700; */
		padding: 20rpx 30rpx;
	}

	/deep/.u-steps-item__wrapper {
		background: #E0DDDA !important;
	}
</style>